import { Tabs } from 'antd';
import React, { useState } from 'react';
import axios from 'axios'
import { Collapse } from 'antd';


function Ly1_7(){
    const { TabPane } = Tabs;

function callback(key) {
  console.log(key);
}
const { Panel } = Collapse;


const [arr,setarr] = useState([])
const [arrx,setarrx] = useState([])

axios.post('http://crm.cimns.com/index.php/oa/addresslist/index',{
    type: 1,
  }).then((data)=> {
    if(data.data.code===200){
        if(arr.length <= 0){  
            let arr1 = data.data.data
            let arr2 = []
            let arr3 = []
            for (var i in arr1) {
                arr2.push(arr1[i]); 
                arr3.push(i)
            }
            setarr(data.data.data)
            setarrx(arr3)
        }
    }
  })
  console.log(arr);
  console.log(arrx);
    return(
        <div className='gg'>
        <div className='ly17' style={{marginLeft:'20px'}}>
            <Tabs defaultActiveKey="1" onChange={callback}>
                <TabPane tab="员工" key="1">
                    <div className='ly17-top' style={{marginBottom:'30px'}}>
                        <span className='iconfont'></span><input style={{border:' 1px #999 solid',paddingLeft:'30px'}} type='text' placeholder='搜索成员' />
                    </div>
                    <div className='ly17-end'>
                    <ul className="off7-com">
                    {arrx.map((item, index) => {
                      return (
                        <li className="off7-item" key={index}>
                          <p className="of7-title" style={{borderBottom:'1px #eee solid',paddingBottom:'10px'}}>{item}</p>
                          {arr[item].map((itm, inde) => {
                            return (
                              <div className="itsl" key={inde}>
                                
                                <div className="xit clearfix">
                                    <p className="name" style={{width:'100px',float:'left'}}>{itm.realname}</p>
                                  <p style={{float:'left',width:'65px',marginRight:'15px'}}>
                                    <i><img alt="00" src=""/></i>
                                    {itm.structure_name}
                                  </p>
                                  <p
                                    style={{float:'left',width:'55px',marginRight:'15px',
                                      display: itm.post ? "block" : "none",
                                    }}
                                  >
                                    <i><img alt="00" src="" /></i>
                                    {itm.post}
                                  </p>
                                  <p style={{float:'left'}}>
                                    <i><img alt="0" src="" /></i>
                                    {itm.username}
                                  </p>
                                </div>
                              </div>
                            );
                          })}
                        </li>
                      );
                    })}
                  </ul>
                    </div>
                </TabPane>
                <TabPane tab="部门" key="2">
                    <div className='ly17-top' style={{marginBottom:'30px'}}>
                        <span className='iconfont'></span><input style={{border:' 1px #999 solid',paddingLeft:'30px'}} type='text' placeholder='搜索成员' />
                    </div>
                    <div>
                    <Collapse onChange={callback}>
                        <Panel header="办公室" key="1">
                        <div className='ly17-end'>
                    <ul className="off7-com">
                    {arrx.map((item, index) => {
                      return (
                        <li className="off7-item" key={index}>
                          {/* <p className="of7-title">{item}</p> */}
                          {arr[item].map((itm, inde) => {
                            return (
                              <div className="itsl" key={inde}>
                                
                                <div className="xit clearfix">
                                    <p className="name" style={{width:'100px',float:'left'}}>{itm.realname}</p>
                                  <p style={{float:'left',width:'60px',marginRight:'15px'}}>
                                  <i><img alt="00" src=""/></i>
                                    {itm.structure_name}
                                  </p>
                                  <p
                                    style={{float:'left',width:'55px',marginRight:'15px',
                                      display: itm.post ? "block" : "none",
                                    }}
                                  >
                                    <i><img alt="00" src="" /></i>
                                    {itm.post}
                                  </p>
                                  <p style={{float:'left'}}>
                                  <i><img alt="0" src="" /></i>
                                    {itm.username}
                                  </p>
                                </div>
                              </div>
                            );
                          })}
                        </li>
                      );
                    })}
                  </ul>
                    </div>
                        </Panel>
                        <Panel header="打杂部" key="2">
                        
                        </Panel>
                    </Collapse>
                    </div>
                </TabPane>
            </Tabs>
        </div>
        </div>
    )
}

export default Ly1_7